<template>
	<div class="component-item">
		<div class="goods-list"
			 :style="{'background': item.bgColor, 'padding-left': item.bgMargin + 'px', 'padding-right': item.bgMargin + 'px'}">
			<div :class="[item.lineNum == 1 ? 'goods-item1' : item.lineNum == 2 ? 'goods-item2' : 'goods-item3']"
				 v-for="item2 in goodsList" :key="item2.id"
				 :style="{'border-radius' : item.bgStyle == 'circle' ? '10px' : ''}" @click="navToDetailPage(item2)">
				<div class="goods-img">
					<img :src="item2.slider_image" mode="widthFix" />
				</div>
				<div class="goods-info">
					<div class="goods-title" v-if="item.show_title == 1">
						{{ item2.name }}
					</div>
					<div class="old-price" v-if="item.show_origin_price == 1">￥ {{item2.original_price }}
					</div>
					<div class="goods-price" v-if="item.show_price == 1"
						 :style="{'color': item.priceColor}">￥ {{ item2.price }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "goods",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				goodsList: []
			}
		},
		mounted() {
			this.getGoodList(this.item)
		},
		methods: {
			// 获取商品数据
			async getGoodList(row) {
				let res = await this.$api.home.getGoodList.get({
					num: row.num,
					cate_id: row.cate_id,
					sortType: row.sortType
				});
				this.goodsList = res.data
			},
			// 普通商品详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style scoped>
.goods-list .goods-item1 {
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    margin-bottom: 10px;
    padding-top: 5px;
}
.goods-item1 .goods-img {
    width: 100px;
    height: 100px;
}
.goods-item1 .goods-img img{
    width: 100%;
    height: 100%;
}
.goods-item1 .goods-info {
    width: calc(100% - 110px);
    height: 100%;
    padding: 0 10px 0 10px;
}
.goods-info .goods-title {
    font-size: 14px;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-info .old-price {
    color: #aaa;
    font-size: 13px;
    margin-top: 5px;
    text-decoration: line-through;
}
.goods-info .goods-price {
    font-size: 18px;
    color: #e93323;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px;
}
.goods-list .goods-item1 {
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    margin-bottom: 10px;
}
.goods-item1 .goods-img {
    width: 100px;
    height: 100px;
}
.goods-item1 .goods-img img{
    width: 100%;
    height: 100%;
}
.goods-item1 .goods-info {
    width: calc(100% - 110px);
    height: 100%;
    padding: 5px 10px 0 10px;
}
.goods-info .goods-title {
    font-size: 14px;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-info .old-price {
    color: #aaa;
    font-size: 13px;
    margin-top: 5px;
    text-decoration: line-through;
}
.goods-info .goods-price {
    font-size: 18px;
    color: #e93323;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
}
.goods-list {
    padding-top: 10px;
	padding-bottom: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;  
}
.goods-item2 {
    background: #fff;
    width: 48%;
    margin-bottom: 15px;
}
.goods-item2 .goods-item {
    width: 48%;
    height: 255px;
    flex-flow: wrap;
}
.goods-item2 .goods-img {
    width: 100%;
}
.goods-item2 .goods-img img {
    width: 100%;
	margin-top: 5px;
}
.goods-item2 .goods-title {
    width: 160px;
    -webkit-line-clamp: 1;
}
.goods-item2 .goods-info {
    width: 90%;
    height: 85px;
    padding: 7px 10px;
}
.goods-item3 {
    background: #fff;
    width: 32%;
    margin-bottom: 15px;
}
.goods-item3 .goods-item {
    width: 100%;
    height: 192px;
    flex-flow: wrap;
}
.goods-item3 .goods-img {
    width: 100%;
}
.goods-item3 .goods-img img {
    width: 100%;
	margin-top: 5px;
}
.goods-item3 .goods-title {
    width: 94px;
    -webkit-line-clamp: 1;
}
.goods-item3 .goods-info {
    width: 90%;
    height: 85px;
    padding: 7px 10px;
}
.goods-item3 .goods-price {
    font-size: 15px !important;
}
</style>